import React, { useState } from "react"
import { Button, ButtonMouseType, Dialog, TBLRC } from "esy-ui"
import { useTranslation } from "react-i18next"

const Footer = (props: { onClose?: () => void }) => {
    const { onClose } = props

    return (
        <div className="flex justify-center">
            <Button type="ghost" onClick={onClose}>
                close
            </Button>
        </div>
    )
}

interface ContentProps {
    changeTitle: ButtonMouseType
    isClose: boolean
    setIsClose: (_p?: boolean) => void
    showFooter: ButtonMouseType
}

const Content = ({ changeTitle, isClose, setIsClose, showFooter }: ContentProps) => {
    return (
        <div className="text-text-2 border-t border-solid">
            <p>body</p>
            <div className="inline-flex flex-col gap-2 items-center px-2">
                <Button type="primary" onClick={changeTitle}>
                    修改标题
                </Button>
                <Button type="primary" onClick={() => setIsClose(!isClose)}>
                    {!isClose ? "显示" : "关闭"} closeIcon
                </Button>
                <Button type="primary" onClick={showFooter}>
                    显示自定义底部
                </Button>
            </div>
        </div>
    )
}

export const DemoL1 = ({ isStatic }: { isStatic?: boolean }) => {
    const { t } = useTranslation()
    const [dirc, setDirc] = useState<TBLRC>("left")
    const [open, setOpen] = useState(false)
    const [title, setTitle] = useState("title")
    const [isClose, setIsClose] = useState(false)
    const [isFooter, setIsFooter] = useState(false)

    const onOpen = (dir: TBLRC) => {
        setDirc(dir)
        if (isStatic) {
            Dialog.confirm({
                direction: dirc,
                onClose,
                title: t(title),
                closeIcon: true,
                footer: isFooter ? <Footer /> : undefined,
                children: <Content changeTitle={changeTitle} setIsClose={setIsClose as (_p?: boolean) => void} isClose={isClose} showFooter={showFooter} />
            })
        } else {
            setOpen(true)
        }
    }

    const changeTitle = () => {
        setTitle(title + title.length)
    }

    const onClose = () => {
        setOpen(false)
        setTitle("title")
        setIsClose(false)
        setIsFooter(false)
    }

    const showFooter = () => {
        setIsFooter(!isFooter)
    }

    return (
        <div>
            {isStatic ? null : (
                <Dialog direction={dirc} open={open} onClose={onClose} title={t(title)} closeIcon={isClose} footer={isFooter ? <Footer /> : undefined}>
                    <Content changeTitle={changeTitle} setIsClose={setIsClose as (_p?: boolean) => void} isClose={isClose} showFooter={showFooter} />
                </Dialog>
            )}
            <div className="flex items-center gap-2">
                <Button type="primary" onClick={() => onOpen("left")}>
                    左开
                </Button>
                <Button type="primary" onClick={() => onOpen("right")}>
                    右开
                </Button>
                <Button type="primary" onClick={() => onOpen("top")}>
                    上开
                </Button>
                <Button type="primary" onClick={() => onOpen("bottom")}>
                    下开
                </Button>
                <Button type="primary" onClick={() => onOpen("center")}>
                    中心
                </Button>
            </div>
        </div>
    )
}

export const demoL1Json = (isStatic = false) => `
import React, { useState } from "react"
import { Button, Dialog, TBLRC } from "esy-ui"
import { useTranslation } from "react-i18next"

const Footer = (props: { onClose?: () => void }) => {
    const { onClose } = props

    return (
        <div className="flex justify-center">
            <Button type="ghost" onClick={onClose}>
                close
            </Button>
        </div>
    )
}

const Content = ({ changeTitle, isClose, setIsClose, showFooter }: any) => {
    return (
        <div className="text-text-2 border-t border-solid">
            <p>body</p>
            <div className="inline-flex flex-col gap-2 items-center px-2">
                <Button type="primary" onClick={changeTitle}>
                    修改标题
                </Button>
                <Button type="primary" onClick={() => setIsClose(!isClose)}>
                    {!isClose ? "显示" : "关闭"} closeIcon
                </Button>
                <Button type="primary" onClick={showFooter}>
                    显示自定义底部
                </Button>
            </div>
        </div>
    )
}
const DemoL1 = ({ isStatic }: any) => {
    const { t } = useTranslation()
    const [dirc, setDirc] = useState<TBLRC>("left")
    const [open, setOpen] = useState(false)
    const [title, setTitle] = useState("title")
    const [isClose, setIsClose] = useState(false)
    const [isFooter, setIsFooter] = useState(false)

    const onOpen = (dir: TBLRC) => {
        setDirc(dir)${
            isStatic
                ? `
        Dialog.confirm({
            direction: dirc,
            onClose,
            title: t(title),
            closeIcon: true,
            footer: isFooter ? <Footer /> : undefined,
            children: <Content changeTitle={changeTitle} setIsClose={setIsClose} isClose={isClose} showFooter={showFooter} />
        })
        `
                : `
        setOpen(true)`
        }
    }

    const changeTitle = () => {
        setTitle(title + title.length)
    }

    const onClose = () => {
        setOpen(false)
        setTitle("title")
        setIsClose(false)
        setIsFooter(false)
    }

    const showFooter = () => {
        setIsFooter(!isFooter)
    }

    return (
        <div>${
            isStatic
                ? ""
                : `
            <Dialog direction={dirc} open={open} onClose={onClose} title={t(title)} closeIcon={isClose} footer={isFooter ? <Footer /> : undefined}>
                <Content changeTitle={changeTitle} setIsClose={setIsClose} isClose={isClose} showFooter={showFooter} />
            </Dialog>`
        }
            <div className="flex items-center gap-2">
                <Button type="primary" onClick={() => onOpen("left")}>
                    左开
                </Button>
                <Button type="primary" onClick={() => onOpen("right")}>
                    右开
                </Button>
                <Button type="primary" onClick={() => onOpen("top")}>
                    上开
                </Button>
                <Button type="primary" onClick={() => onOpen("bottom")}>
                    下开
                </Button>
                <Button type="primary" onClick={() => onOpen("center")}>
                    中心
                </Button>
            </div>
        </div>
    )
}
`
